import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { toggleLyrics } from '../../../store/actions/music.action';
import './index.css';
const mapStateToProps = state => {
    return {
        music: state.music
    }
}
const mapDispatchToProps = dispatch => {
    return {
        toggleLyrics: (...args) => dispatch(toggleLyrics(...args))
    }
}
const Disc = ({ music, toggleLyrics }) => {
    console.log("Disc Init");
    useEffect(() => {
        if (music.curSong.url) {
            
        }
    }, [music.curSong.url, music.isPlaying, music.showSongPage, music.toggleLyrics]);
    return (
        <div onClick={() => toggleLyrics(true)} className={`rotate-area rotate ${music.curSong.url? 'show' : ''} ${music.showSongPage? 'big' : ''} ${music.isPlaying ? '' : 'suspended'} ${music.toggleLyrics ? 'fade-out': ''}`}>
            <img className="disc-cover" src="./imgs/singlecover.png"></img>
            <img className="round-img" src={music.curSong.id ? music.curSong.album.picUrl : ''}></img>
        </div>
    );
}

export default connect(mapStateToProps, mapDispatchToProps)(Disc);
